<script setup>
import { useOptions } from '/@/stores/options';
import { useProductApi } from '/@/api/product';

const storesOption = useOptions();

const { getCateList } = useProductApi();

const props = defineProps({
	modelValue: {
		type: Number,
	},
	showStatus: {
		type: Number,
		default: 1,
	},
	cateType: {
		type: Number,
		default: 1,
		require: true,
	},
	firstLevelDisabled: {
		type: Boolean,
		default: false,
	},
	firstId: {
		type: Number,
	},
	secondId: {
		type: Number,
	},
	thirdId: {
		type: Number,
	},
});
const emit = defineEmits(['update:modelValue', 'update:firstId', 'update:secondId', 'update:thirdId']);
const selected = computed({
	get() {
		return props.modelValue || props.thirdId || props.secondId || props.firstId;
	},
	set(val) {
		emit('update:modelValue', val);
	},
});
const cateOptions = ref([]);
const init = async () => {
	let res = await getCateList(props.showStatus, props.cateType);
	if (res.code !== 200) return;
	cateOptions.value = res.data.map((item) => {
		if (props.firstLevelDisabled) item.disabled = true; //禁用第一级选项
		return item;
	});
	storesOption.setCateList(cateOptions.value);
};
onMounted(init);
const cascaderRef = ref();
const changeSelector = () => {
	const checkedNodes = cascaderRef.value.getCheckedNodes();
	console.log('00-0---', checkedNodes);
	if (checkedNodes.length > 0) {
		const { pathValues } = checkedNodes[0];
		emit('update:firstId', pathValues[0] || null);
		emit('update:secondId', pathValues[1] || null);
		emit('update:thirdId', pathValues[2] || null);
	} else {
		emit('update:firstId', null);
		emit('update:secondId', null);
		emit('update:thirdId', null);
	}
};
</script>
<template>
	<div class="CateSelector">
		<el-cascader
			v-model="selected"
			ref="cascaderRef"
			:options="cateOptions"
			:props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'name' }"
			:show-all-levels="false"
			filterable
			clearable
			placeholder="搜索分类"
			@change="changeSelector"
			style="width: 100%"
		></el-cascader>
	</div>
</template>

<style lang="scss" scoped>
.CateSelector {
	width: 100%;
}
</style>
